<template>
    <div id="tabbar">
        <Tarbaritem path="/mobile/home/music" isactivecolor="cornflowerblue">
            <img slot="item-icon" src="~tarbar/music.png"  alt="">
            <img slot="item-icon-active" src="~tarbar/music_active.png" alt="">
            <div slot="item-text">乐评</div>
        </Tarbaritem>
        <Tarbaritem path="/mobile/home/book" isactivecolor="cornflowerblue">
            <img slot="item-icon" src="~tarbar/book.png"  alt="">
            <img slot="item-icon-active" src="~tarbar/book_active.png" alt="">
            <div slot="item-text">书评</div>
        </Tarbaritem>
        <Tarbaritem path="/mobile/home/cartoon" isactivecolor="cornflowerblue">
            <img slot="item-icon" src="~tarbar/cartoon.png"  alt="">
            <img slot="item-icon-active" src="~tarbar/cartoon_active.png" alt="">
            <div slot="item-text">漫评</div>
        </Tarbaritem>
        <Tarbaritem path="/mobile/home/movie" isactivecolor="cornflowerblue">
            <img slot="item-icon" src="~tarbar/movie.png"  alt="">
            <img slot="item-icon-active" src="~tarbar/movie_active.png" alt="">
            <div slot="item-text">影评</div>
        </Tarbaritem>
    </div>
</template>

<script>
    import Tarbaritem from "./Tarbaritem";
    export default {
        name: "Tarbar",
        components:{
            Tarbaritem
        }
    }
</script>

<style scoped>
    #tabbar{
        display: flex;
        background-color: #f6f6f6;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 -3px 1px rgba(100, 100, 100, 0.1);
    }
</style>